<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>APP</title>
		<link href="css/weui.min.css" rel="stylesheet" />
		<link href="css/jquery-weui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<link href="fonts/iconfont.css" rel="stylesheet" />
		<link href="css/flex.css" rel="stylesheet" />
		<script src="js/immersed.js"></script>
	</head>

	<style>
		.main-body {
			background-color: #f4f4f4;
		}
		
		.weui-cell {
			font-size: 15px;
		}
		
		.weui-label {
			width: 100px;
		}
	</style>

	<body>

		<div id="app">
			<form id="form" v-on:submit.prevent>

				<div class="xiaoyi-header header-red" id="header">
					<div class="xiaoyi-header-left"><i class="iconfont icon-back " onclick="wsClose()"></i></div>
					<div class="xiaoyi-header-title">发布需求</div>
					<!--<div class="xiaoyi-header-right"><span style="margin: 10px 10px 0 0 ; display: block;" @click="onSubmit">搜索</span></div>-->
				</div>

				<div class="main-body" id="main">

					
					
					<div class="weui-cells weui-cells_form">

						<div class="weui-cell">
							<div class="weui-cell__hd"><label class="weui-label">手机号</label></div>
							<div class="weui-cell__bd">
								<input class="weui-input" type="text" name="phone" v-model="phone">
							</div>
						</div>
						
						<div class="weui-cell">
					        <div class="weui-cell__hd"><label class="weui-label">微信号</label></div>
					        <div class="weui-cell__bd">
					          <input class="weui-input" type="text" name="weixin" placeholder="图片验证码" v-model="weixin">
					        </div>
					      </div>

							<div class="weui-cell">
							        <div class="weui-cell__bd">
							          <textarea name="desc" class="weui-textarea" placeholder="需求描述，请尽量描述详细不少于30个文字，比如产品的题材、形状及价格。" rows="4"></textarea>
							        </div>
							      </div>
					</div>
					
				<div class="weui-cells weui-cells_form">
				  <div class="weui-cell">
				    <div class="weui-cell__bd">
				      <div class="weui-uploader">
				        <div class="weui-uploader__hd">
				          <p class="weui-uploader__title">图片上传</p>
				          <div class="weui-uploader__info">0/2</div>
				        </div>
				        <div class="weui-uploader__bd">
				          <ul class="weui-uploader__files" id="uploaderFiles"></ul>
				          <div class="weui-uploader__input-box select-pic" >
				          </div>
				        </div>
				      </div>
				    </div>
				  </div>
				</div>
					
					<div class="weui-btn-area">
						<button type="submit" @click="onSubmit" class="weui-btn weui-btn_primary">提 交</button>
					</div>

				</div>

			</form>
		</div>

		<script src="js/mui.min.js"></script>
		<script src="js/jquery-2.1.4.js"></script>
		<script src="js/jquery-weui.min.js"></script>
		<script src="js/vue.js"></script>
		<script src="js/smarge.js"></script>
		<script src="js/common.js"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init();

			mui.plusReady(function() {
				
				var userinfo = getUserInfo();
				var vm = new Vue({
					el: "#app",
					data: {
						userinfo: userinfo,
						phone:userinfo.phone,
						weixin:userinfo.weixin,
					},
					mounted: function() {
						this.inits()
					},
					methods: {
						inits: function() {
							var vm = this;
						},
						onSubmit: function() {
							var _data = $('#form').serialize();
							//alertHTML(_data)
							plus.nativeUI.showWaiting()
							Post(SERVER_URL+"&c=Zhaohuo&a=zhaohuoAdd",_data,function(data){ 
									if(data.status){
										plus.nativeUI.closeWaiting();
										//alertHTML(_data)
										mui.toast(data.info);
										wsClose()
									}else{
										plus.nativeUI.closeWaiting(); 
										mui.alert(data.info)
									}
							})
						}
					}
				});
				
				
				mui(document).on('tap', '.select-pic', function(e) {
				var btnArray = [{
					title: "从相册选择"
				}, {
					title: "拍照"
				}];
				plus.nativeUI.actionSheet({
					title: "图片上传",
					cancel: "取消",
					buttons: btnArray
				}, function(e) {
					var index = e.index;
					switch(index) {
						case 0:
							break;
						case 1:
							appendByGallery();
							break;
						case 2:
							appendByCamera();
							break;
						default:
							// 其它
							break;
					}
				});
			});
			
			var serverurl = SERVER_URL + '&c=Public&a=ajaxUploadPicture&path=demand_files';
			
			// 拍照添加文件
			function appendByCamera(){
				plus.camera.getCamera().captureImage(function(p){
					var wt=plus.nativeUI.showWaiting('正在上传...');
					var task=plus.uploader.createUpload(serverurl,
					{method:"POST"},
					function(t,status){ //上传完成
						if(status==200){
							var _path = JSON.parse(t.responseText).data.jushifile.path;
							var _id = JSON.parse(t.responseText).data.jushifile.id;
							var _imgSrc='http://imgcdn.jushiyunku.com/'+_path+'@!200x200';
							addImage(_id,_imgSrc);
							wt.close();
						}else{
							mui.toast("上传失败："+status);
							wt.close();
						}
					}
				);
				task.addData("client","jushiyunku");
				task.addData("uid",getUid());
				task.addFile(p,{key:'jushifile'});
				task.start();
				});	
			}
			
			// 从相册中选择图片
			function appendByGallery(){
				
			    plus.gallery.pick( function(e){
					    var i = 0 ;
					    	var length = e.files.length;
					    	var wt=plus.nativeUI.showWaiting('正在上传 1/'+length);
					    	
					    	function upload(){
							var task=plus.uploader.createUpload(serverurl,
								{method:"POST"},
								function(t,status){ //上传完成
									if(status==200){
										var _path = JSON.parse(t.responseText).data.jushifile.path;
										var _id = JSON.parse(t.responseText).data.jushifile.id;
										var _imgSrc='http://imgcdn.jushiyunku.com/'+_path+'@!200x200';
										addImage(_id,_imgSrc);
										i++;
										if (i < length) {
											upload();
										  }else{
										  	wt.close();
										  }
										wt.setTitle('正在上传 '+i+'/'+length)
									}else{
										mui.toast("上传失败："+status);
										wt.close();
									}
								}
							);
							task.addData("client","jushiyunku");
							task.addData("uid",getUid());
							task.addFile(e.files[i],{key:'jushifile'});
							task.start();
						}
					 upload();

			    }, function ( e ) {
			    		mui.toast( "取消选择" );
			    },{filter:"image",multiple:true,maximum:9,system:false,onmaxed:function(){
					plus.nativeUI.alert('一次最多只能选择9张图片，如果图片较多请分多次选择！');
			    }});
			}
			

			
			// 产生一个随机数
			function getUid(){
				return Math.floor(Math.random()*100000000+10000000).toString();
			}
			
			
			function addImage(id,imgurl){
				var str = '<li class="weui-uploader__file" style="background-image:url('+imgurl+')"><input type="hidden" name="imgid[]" value="'+id+'"></li>';
				$("#uploaderFiles").prepend(str);
			}

	});

			
		</script>
	</body>

</html>